<template>
  <div id="networkOutComponent">
    <img src="static/image/public/network_out.png" alt="网络连接错误" class="n-icon">
    <p class="n-text">网络似乎出问题啦！</p>
    <p class="n-tip">请刷新检查网络</p>
    <button class="n-reload" @click="reloadNetwork">重新加载</button>
  </div>
</template>

<script>
  export default {
    props:[],
    components:{},
    data:function(){
      return {

      }
    },
    created:function(){},
    mounted:function(){},
    computed:{},
    methods:{
      // 再次获取当前网络状态
      reloadNetwork:function(){
        let target = plus.networkinfo.getCurrentType(); //获取网络连接状态
        let toastConfig = {
          text:'',
          type:'text',
          position:'top'
        }
        // 0 表示不认识的网络。 1表示未连接网络
        if ( target == 0 || target == 1) {  
          toastConfig.text = '无法连接网络，请稍后再试';
          this.$store.commit('changeNetworkStatus',true);
        }else{
          toastConfig.text = '网络连接成功';
          this.$store.commit('changeNetworkStatus',false);
        } 
        this.$vux.toast.show(toastConfig);
      }
    }
  }
</script>

<style lang="less" scoped>
  #networkOutComponent{
    position: fixed;
    top: 88px;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: white;
    text-align: center;
    z-index: 9999;
    .n-icon{
      display: block;
      width: 400px;
      height:auto;
      margin: 100px auto;
    }
    .n-text{
      font-size: 30px;
      color: #666666;
      margin: 25px 0;
    }
    .n-tip{
      color: #999999;
      font-size: 26px;
    }
    .n-reload{
      margin: 50px 0;
      width: 400px;
      height:90px;
      border: none;
      outline: none;
      color: white;
      background:linear-gradient(90deg,rgba(253,196,111,1),rgba(254,172,50,1));
      border-radius: 10px;
    }
  }
</style>